<template>
	<view class="dataCenters">
		<view class="search-page" v-if="searchHead">
			<!-- 所有表单 -->
			<view class="form-item u-f u-f-ac">
				<text class="title">指令单:</text>
				<input class="card" type="text" v-model="aufnr" />
			</view>
			<view class="form-item u-f u-f-ac">
				<text class="title">销售订单:</text>
				<input class="card" type="text" v-model="kdauf" />
			</view>
			<view class="form-item u-f u-f-ac">
				<text class="title">物料:</text>
				<input class="card" type="text" v-model="matnrWx" />
			</view>
			<view class="form-item u-f u-f-ac">
				<text class="title">工序:</text>
				<picker class="card" @change="chooseoperation" :value="operationIndex" :range="operationList">
					<view class="u-f u-f-sbc u-f-item">
						<text class="txt1">{{operationIndex === -1 ? '请选择' : operationList[operationIndex]}}</text>
						<text class="icon cuIcon-triangledownfill"></text>
					</view>
				</picker>
			</view>
			<view class="form-item u-f u-f-ac">
				<text class="title">报工日期:</text>
				<picker class="card" mode="date" :value="startTime" :start="startTime" :end="endDate" @change="startTimeChange">
					<text class="txt2" v-if="startTime == null">请选择</text>
					<text class="txt3" v-else>{{startTime}}</text>
				</picker>
				<div>~</div>
				<picker class="card" mode="date" :value="endTime" :start="startTime" :end="endTime" @change="endTimeChange">
					<text class="txt2" v-if="endTime == null">请选择</text>
					<text class="txt3" v-else>{{endTime}}</text>
				</picker>
			</view>
			<!-- 查询按钮 -->
			<view class="u-f u-f-sbc" style="100%">
				<view class="u-f u-f-jc" style="width: 50%;">
					<button class="btn" @tap.stop="searchQuery">查询</button>
				</view>
				<view class="u-f u-f-jc" style="width: 50%;">
					<button class="btn" @tap.stop="searchReset">重置</button>
				</view>
			</view>
		</view>
		<!-- 数据列表 -->
		<view class="appointment-list">
			<view v-if="listData.length==0" class="empty">
			    <view>
			        <view style="text-shadow: 2rpx 2rpx 4rpx #000000;color: #ffffff;font-size: 36rpx;">{{text}}</view>
			    </view>
			</view>
			<view v-else class="bigml" v-for="(item,index) in listData" :key="item.id">
				<view class="app-item u-f u-f-end" v-if="index==0" @tap.stop="searchHeadChange">
					{{searchHead?'查询⇪':'查询⇣'}}
				</view>
				<view class="app-item u-f u-f-sbc">
					<view class="items u-f u-f-ac">
						<text class="txt1">报工日期:</text>
						<text class="txt1">{{item.budat||''}}</text>
					</view>
					<view class="items u-f u-f-ac">
						<text class="txt1">指令单:</text>
						<text class="txt1">{{item.aufnr||''}}</text>
					</view>
				</view>
				<view class="app-item u-f u-f-sbc">
					<view class="items u-f u-f-ac">
						<text class="txt1">销售订单:</text>
						<text class="txt1">{{item.kdauf||''}}</text>
					</view>
					<view class="items u-f u-f-ac">
						<text class="txt1">姓名:</text>
						<text class="txt1">{{item.realname||''}}</text>
					</view>
				</view>
				<view class="app-item u-f u-f-sbc">
					<view class="items u-f u-f-ac">
						<text class="txt1">物料名称:</text>
						<text class="txt1">{{item.maktx||''}}</text>
					</view>

				</view>
				<view class="app-item u-f u-f-sbc">
					<view class="items u-f u-f-ac">
						<text class="txt1">尺码:</text>
						<text class="txt1">{{item.size||''}}</text>
					</view>
					<view class="items u-f u-f-ac">
						<text class="txt1">工序:</text>
						<text class="txt1">{{item.operationName||''}}</text>
					</view>
				</view>
				<view class="app-item u-f u-f-sbc">
					<view class="items u-f u-f-ac">
						<text class="txt1">单价:</text>
						<text class="txt1">{{item.price||''}}</text>
					</view>
					<view class="items u-f u-f-ac">
						<text class="txt1">良品数量:</text>
						<text class="txt1">{{item.gmnga||''}}</text>
					</view>
				</view>
				<view class="app-item u-f u-f-sbc">
					<view class="items u-f u-f-ac">
						<text class="txt1">颜色:</text>
						<text class="txt1">{{item.colorName||''}}</text>
					</view>
					<view class="items u-f u-f-ac">
						<text class="txt1">金额:</text>
						<text class="txt1">{{item.amount||''}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				searchHead: false,
				// 指令单
				aufnr: '',
				// 销售订单
				kdauf: '',
				// 物料
				matnrWx: '',
				// 下拉框
				memberCardList:[],
				//工序
				operationIndex: -1,
				operationList:[],
				operationListArr:[],
				startTime: null, // 开始时间
				endTime: null, // 结束时间
				text:'暂无数据…',
				//列表
				listData: [],
				pageNo: 0,
				endFlag: false,
				list:[],
				loadMoreText: "加载中...",
				showLoadMore: false,
			};
		},
		onShow() {
			this.listData = [],
				this.filter = "",
				this.endFlag = false,
				this.loadMoreText = "加载更多",
				this.showLoadMore = false;
				this.getdictList();
			this.initData();
		},
		onReachBottom() {
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				uni.showToast({
					icon: 'none',
					title: this.loadMoreText
				});
				return;
			}
			setTimeout(() => {
				this.getList();
			}, 300);
		},
		onPullDownRefresh() {
			this.searchReset();
		    uni.stopPullDownRefresh();
		},
		computed: {
		},
		methods: {
			multiArray(){
			    return this.pickedArr.map(arr=>arr.map(item=>item.name))
			},
			initData() {
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				setTimeout(() => {
					this.getList();
					uni.stopPullDownRefresh();
				}, 300);
			},
			getList() {
				let ope = this.operationIndex!== -1 ? this.operationListArr[this.operationIndex].value:''
				this.listData=[]
				let url = '/dcloud/confirmation/confirmation/pieceQueryReport';
				this.pageNo+=1
				let data = {
					        "aufnr":this.aufnr,
							"kdauf":this.kdauf,
							"matnrWx":this.matnrWx,
							"operation":ope,
							"startTime":this.startTime,
							"endTime":this.endTime,
							"pageNo":this.pageNo,
							"pageSize":10,
					}
				this.$http.get(url, {
					params: data
				}).then(res => {
					console.log(res)
					if (res.statusCode == "200") {
						this.list = res.data.result.records;
						this.total = res.data.result.total;
						if (res.data.result.current == res.data.result.pages) {
							this.endFlag = true;
							this.loadMoreText = "已显示全部数据"
						}
						this.list.forEach((e) => {
							this.listData.push({
								id:e.id,
									budat: e.budat,
									aufnr: e.aufnr,
									kdauf: e.kdauf,
									realname: e.realname,
									maktx: e.maktx,
									colorName: e.colorName,
									size: e.size,
									operationName: e.operationName,
									price: e.price,
									gmnga: e.gmnga,
									amount: e.amount,
							});
						});
						console.log(this.listData)
					uni.hideLoading();
					} else {
						// 数据获取失败
					}

				}).catch(err => {
					console.log(err);
				});
			},
			getdictList() {
				let url = "/dcloud/dict/getOptionsByListWx?pageNo=1&pageSize=100";
				let data = [
								{
								  remark:'1',
								  code:'operation_code',
								  text:'operation_name',
								  table:'mc_operation',//工序
								},
						   ]
				this.$http.post(url,data
				).then(res => {
					console.log(res)
					if (res.statusCode == "200") {
						this.memberCardList = []
						if (res.statusCode == "200") {
							this.memberCardList = res.data.result;
							console.log(this.memberCardList)
							this.memberCardList[1].forEach((e) => {
								this.operationList.push(
									e.text
								);
								this.operationListArr.push(
									e
								);

							});
						}
					}
					uni.hideLoading();
				}).catch(err => {
					console.log(err);
				});
			},
			// 开始时间
			startTimeChange(e) {
				this.startTime = e.target.value
			},
			// 结束时间
			endTimeChange(e) {
				this.endTime = e.target.value
			},
			chooseoperation(e){
				this.operationIndex = e.detail.value
			},
			searchHeadChange() {
				this.searchHead = !this.searchHead
			},
			searchQuery(){
				this.pageNo=0
				this.initData();
			},
			searchReset(){
				this.aufnr = ''
				this.kdauf = ''
				this.matnrWx = ''
				this.operationIndex = -1
				this.startTime = null
				this.endTime = null
				this.searchQuery()
			},
		},
	}
</script>

<style lang="scss">
@import './scss/pieceReport.scss';
</style>
